<template>
  <div>
    <el-header>欢迎使用惊喜一餐！</el-header>
    <el-main>
      <el-card>
        <h2>推荐餐厅</h2>
        <ul>
          <li v-for="restaurant in recommendedRestaurants" :key="restaurant.id">
            {{ restaurant.name }}
          </li>
        </ul>
      </el-card>
      <el-button @click="$router.push('/restaurants')">餐厅列表</el-button>
      <el-button @click="$router.push('/user')">用户信息</el-button>
      <el-button type="primary" @click="changeChatBox">惊喜一餐</el-button>
    </el-main>
    <!-- 聊天框 -->
    <el-card v-if="showChatBox" class="chat-box">
      <div class="chat-header">
        <span>聊天</span>
        <el-button @click="closeChat" type="danger" :icon="Delete" circle />
      </div>
      <div class="chat-content">
        <div v-for="(message, index) in chatMessages" :key="index" class="chat-message">
          <strong>{{ message.sender }}:</strong> {{ message.text }}
        </div>
      </div>
      <div class="chat-input-container">
        <el-input
          v-model="userInput"
          placeholder="输入您的用餐需求..."
          @keyup.enter="sendMessage"
          class="chat-input"
        ></el-input>
        <el-button type="primary" @click="sendMessage">发送</el-button>
      </div>
    </el-card>
  </div>
</template>

<script setup>
import {ref} from 'vue';
import axios from 'axios';
import {Delete} from "@element-plus/icons-vue";
import {getSurprise} from "@/api/llm";


const recommendedRestaurants = ref([
  {id: 1, name: '哈哈餐厅1'},
  {id: 2, name: '高评分餐厅2'}
])


const showChatBox = ref(false);
const userInput = ref('');
const chatMessages = ref([]);
const changeChatBox = () => {
  showChatBox.value = !showChatBox.value;
  if (showChatBox.value){
    getSurpriseMeal();
  }

};
const getSurpriseMeal = async () => {
  const res = await getSurprise();
  console.log("getSurprise", res);
  // 添加系统响应到聊天记录
  chatMessages.value.push({ sender: '系统', text: res.data });
}
const sendMessage = async () => {
  if (userInput.value.trim() === '') return;

  // 添加用户消息到聊天记录
  chatMessages.value.push({ sender: '用户', text: userInput.value });

  // 清空用户输入
  userInput.value = '';
};

const closeChat = async () => {
  showChatBox.value = false;
};
</script>


<style scoped>
.el-header {
  background-color: #1e90ff;
  color: white;
  text-align: center;
  line-height: 60px;
  font-size: 24px;
}

.chat-box {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 900px;
  max-height: 800px;
  overflow-y: auto;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.chat-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  background-color: #f5f5f5;
  border-bottom: 1px solid #ddd;
}

.chat-content {
  padding: 10px;
  max-height: 300px;
  overflow-y: auto;
}

.chat-message {
  margin-bottom: 10px;
}

.chat-input-container {
  display: flex;
  align-items: center;
  padding: 10px;
  border-top: 1px solid #ddd;
}

.chat-input {
  flex: 1;
  margin-right: 10px;
}
</style>